<template>
  <div class="userBox bg-f2" id="uploadtu4">
    <div class="bg-fff">
      <!-- <joint-selection :JointSelection="JointSelection" @guanbi="pingguanbi($event)"></joint-selection> -->
      <el-breadcrumb separator-class="el-icon-arrow-right" class="pAll">
        <el-breadcrumb-item :to="{ path: '/bayonetList' }">卡口列表</el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="pAll">
        <el-row>
          <el-col :span="2">
            <span class="title">卡口信息：</span>
          </el-col>
          <el-col :span="8">
            <el-form-item label="卡口名称:" prop="kkmc">
              <el-input v-model.trim="ruleForm.kkmc" clearable placeholder="卡口名称"></el-input>
            </el-form-item>
            <el-form-item label="卡口编号:" prop="kkbh" class="form-item-bottom">
              <el-input v-model.trim="ruleForm.kkbh" clearable placeholder="卡口编号"></el-input>
            </el-form-item>
            <el-form-item prop="glbh1" class="form-item-bottom">
              <div class="xunze">
                <span>关联编号1:</span>
                <el-input v-model.trim="ruleForm.glbh1" clearable placeholder="请输入"></el-input>
              </div>
            </el-form-item>
            <el-form-item prop="glbh2">
              <div class="xunze">
                <span>关联编号2:</span>
                <el-input v-model.trim="ruleForm.glbh2" clearable placeholder="请输入"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="卡口类型:" prop="kklx_ID">
              <el-select
                v-model="ruleForm.kklx_ID"
                placeholder="选择卡口类型"
                :no-data-text="tiText1"
                class="inputSelect"
                clearable
              >
                <el-option
                  v-for="item in kakoulxOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="辖区(安装地址):" prop="xqbm">
              <!-- <el-input
              v-show="title !== '添加卡口' ? true : false"
              v-model.trim="xianxidizhi"
              class="inputSelect"
              disabled
              placeholder="辖区(安装地址)"
              ></el-input>-->
              <el-cascader
                v-show="showcity"
                v-model="ruleForm.xqbm"
                ref="cascaderList"
                class="inputSelect"
                style="margin-right: 10px"
                clearable
                @change="handleChange"
                @visible-change="visibleChange"
                :props="{
                  lazy: true,
                  lazyLoad: lazyLoadAdd,
                }"
              ></el-cascader>
              <el-input
                v-show="!showcity"
                v-model="xianxidizhi"
                class="inputSelect"
                disabled
                style="margin-right: 10px"
              ></el-input>
              <el-button
                type="primary"
                class="btnSizeStyle"
                plain
                size="small"
                @click="selectCity"
              >选择</el-button>
              <!-- <el-button
              style="marginLeft: 20px;"
              v-show="title !== '添加卡口' ? true : false"
              type="primary"
              size="small"
              >选择辖区</el-button>-->
              <!-- <el-cascader
              v-model="ruleForm.xqbm"
              :options="cityOptions"
              @change="handleChange"
              clearable
              class="inputSelect"
              ></el-cascader>-->
              <div
                v-show="title === '编辑卡口' && ruleForm.zjcount > 0 ? true : false"
                style="color: #f56f6f;"
              >修改辖区后,该卡口所绑定的一切设备将被解除绑定,请谨慎修改</div>
            </el-form-item>
            <!-- <el-form-item label="辖区编码:">
              <el-input v-model.trim="ruleForm.xqbm2" disabled placeholder="辖区编码"></el-input>
            </el-form-item>-->
            <el-form-item label="详细地址:">
              <el-input
                clearable
                type="textarea"
                :maxlength="100"
                resize="none"
                show-word-limit
                :rows="4"
                v-model.trim="ruleForm.xxdz"
                placeholder="请输入设备安装详细地址信息"
              ></el-input>
            </el-form-item>
            <el-form-item label="资产坐标(经度/纬度):" prop="gpszb">
              <el-input
                clearable
                v-model.trim="ruleForm.gpszb"
                placeholder="00.000000，000.000000"
                class="inputSelect"
              ></el-input>
              <el-tooltip content="输入经纬度，并以英文逗号隔开" placement="top-start" effect="light">
                <i class="el-icon-warning-outline iconBtn"></i>
              </el-tooltip>
              <div class="jinDuTitle">请填写度格式的值（绑定前卫主机可自动获取）</div>
            </el-form-item>
            <el-form-item prop="NE">
              <div class="DuFen">
                <el-input v-model.trim="ruleForm.NE" clearable placeholder="度分格式"></el-input>
                <el-button
                  type="primary"
                  size="medium"
                  class="btnGs btnSizeStyle"
                  :disabled="ruleForm.NE === '' ? true : false"
                  @click="geZhuanhuan"
                  v-preventReClick
                >格式转换</el-button>
                <el-input v-model.trim="ruleForm.NE2" clearable placeholder="度格式"></el-input>
                <el-tooltip content="度格式的值请填写到资产坐标" placement="top-start" effect="light">
                  <i class="el-icon-warning-outline iconBtn"></i>
                </el-tooltip>
              </div>
            </el-form-item>
            <el-form-item
              label="车道数："
              prop="csArr"
              :rules="{ validator: checkAge, required: true, trigger: 'change' }"
            >
              <el-button
                :style="{ margin: cswocaonima + 'px', padding: '12px 0 0 0' }"
                @click="addDomain"
                type="text"
              >+ 添加车道</el-button>
              <div style="color: #909399; line-height: 10px">车道是双向，最多可添加 10 个车道</div>
              <div v-for="domain in ruleForm.csArr" :key="domain.key">
                <el-select
                  v-model="domain.value"
                  clearable
                  placeholder="选择车道"
                  class="inputSelect"
                  style="margin-right: 10px"
                  @change="xiugaiDom"
                >
                  <el-option
                    v-for="item in chedaoOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-button
                  :disabled="domain.cdzcsl > 0 ? true : false"
                  @click.prevent="removeDomain(domain)"
                  type="text"
                  class="color_f56f6f"
                  :style="{ margin: cswocaonima + 'px' }"
                >删除</el-button>
                <div class="svgBox" v-show="domain.cdzcsl ? true : false">
                  <svg class="iconfont imgIcon" aria-hidden="true">
                    <use xlink:href="#el-icon-mybinding" />
                  </svg>
                  <span style="color: #333333">已绑定</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="3">
            <el-form-item label="道路等级:" prop="dldj">
              <el-select
                v-model="ruleForm.dldj"
                :no-data-text="tiText3"
                clearable
                placeholder="选择道路等级"
                class="inputSelect"
              >
                <el-option
                  v-for="item in daoluOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="触发类型:" prop="cflx_MC">
              <el-select
                v-model="ruleForm.cflx_MC"
                clearable
                placeholder="选择触发类型"
                :no-data-text="tiText2"
                class="inputSelect"
              >
                <el-option
                  v-for="item in chufalxOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="小型车限速(km/h):" prop="xcxs">
              <el-input
                clearable
                v-model.trim="ruleForm.xcxs"
                v-on:input="inputMax(ruleForm.xcxs)"
                placeholder="小型车限速"
                class="inputSelect"
              ></el-input>
            </el-form-item>
            <el-form-item label="大型车限速(km/h):" prop="dcxs">
              <el-input
                clearable
                v-model.trim="ruleForm.dcxs"
                v-on:input="inputMax2(ruleForm.dcxs)"
                placeholder="大型车限速"
                class="inputSelect"
              ></el-input>
            </el-form-item>
            <el-form-item label="方向数:">
              <el-input v-model.trim="ruleForm.fxs" disabled class="inputSelect"></el-input>
            </el-form-item>
            <!-- <el-form-item label="车道数:" prop="cds">
            <el-input-number
              v-model="ruleForm.cds"
              controls-position="right"
              :min="0"
              :max="10"
              size="medium"
            ></el-input-number>
            <div v-show="chedaoshuTS" style="color: red;">
              <i class="el-icon-warning-outline"></i> 车道数重新修改后，会影响该卡口所绑定设备的车道重置，请谨慎修改
            </div>
            </el-form-item>-->
            <el-form-item label="开启人脸:" class="form-item-bottom">
              <el-radio-group v-model="ruleForm.sfkqrl">
                <el-radio :label="1">已开启</el-radio>
                <el-radio :label="0">未开启</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="开启二次识别:">
              <el-radio-group v-model="ruleForm.sfkqecsb">
                <el-radio :label="1">已开启</el-radio>
                <el-radio :label="0">未开启</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="交通接入服务器:" prop="jtjrfwq">
              <el-input
                clearable
                v-model.trim="ruleForm.jtjrfwq"
                placeholder="114.114.114.114"
                class="inputSelect"
              ></el-input>
            </el-form-item>
            <el-form-item label="竣工图:">
              <el-upload
                action="#"
                ref="upload"
                accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
                list-type="picture-card"
                :auto-upload="false"
                :on-change="lalal"
                :file-list="fileList"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
              <span class="el-upload__tip">只能上传jpg/png文件，且不超过2M</span>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="fooer_btn">
          <el-button class="btnSizeStyle" size="medium" @click="goBack">取 消</el-button>
          <el-button
            class="btnSizeStyle"
            type="primary"
            :loading="goliebiao"
            size="medium"
            @click="baoCun(title, 'ruleForm')"
            v-preventReClick
          >保 存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getUrl } from '@/utils/getUrl.js'
import { linkageCity } from '@/utils/linkageCity.js'
import { ziC, upload } from '@/utils/allUrl.js'
import { startLoading, endLoading } from '@/utils/loading.js'
// import jointSelection from '@/components/JointSelection/index.vue'
export default {
  data: function() {
    return {
      radio: '单个添加',
      //   城市地址
      // cityOptions: [],
      //   卡口类型
      kakoulxOptions: [],
      //   触发类型
      chufalxOptions: [],
      // 道路等级类型
      daoluOptions: [],
      chedaoOptions: [
        {
          value: '车道1',
          label: '车道1'
        },
        {
          value: '车道2',
          label: '车道2'
        },
        {
          value: '车道3',
          label: '车道3'
        },
        {
          value: '车道4',
          label: '车道4'
        },
        {
          value: '车道5',
          label: '车道5'
        },
        {
          value: '车道6',
          label: '车道6'
        },
        {
          value: '车道7',
          label: '车道7'
        },
        {
          value: '车道8',
          label: '车道8'
        },
        {
          value: '车道9',
          label: '车道9'
        },
        {
          value: '车道10',
          label: '车道10'
        }
      ],
      ruleForm: {
        kkmc: '',
        kkbh: '',
        glbh1: '',
        glbh2: '',
        kklx_ID: '',
        xqbm: '',
        xqbm2: 0,
        xxdz: '',
        gpszb: '',
        NE: '',
        NE2: '',
        dldj: '',
        cflx_MC: '',
        xcxs: '',
        dcxs: '',
        fxs: 0,
        // cds: 0,
        sfkqrl: 1,
        sfkqecsb: 1,
        jtjrfwq: '',
        csArr: []
      },
      rules: {
        kkmc: [
          { required: true, message: '此处为必填项', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        kkbh: [
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9-_]+$/g, message: '请输入数字或者字母', trigger: 'blur' }
        ],
        xqbm: [{ required: true, message: '此处为必填项', trigger: 'change' }],
        glbh1: [
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9-_]+$/, message: '请输入数字或者字母', trigger: 'blur' }
        ],
        glbh2: [
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9-_]+$/, message: '请输入数字或者字母', trigger: 'blur' }
        ],
        kklx_ID: [{ required: true, message: '此处为必填项', trigger: 'change' }],
        gpszb: [{ pattern: /^[,.0-9]*$/, message: '请输入以英文逗号分隔的数字', trigger: 'blur' }],
        NE: [{ pattern: /^[,.0-9]*$/, message: '请输入以英文逗号分隔的数字', trigger: 'blur' }],
        dldj: [{ required: true, message: '此处为必填项', trigger: 'change' }],
        cflx_MC: [{ required: true, message: '此处为必填项', trigger: 'change' }],
        xcxs: [{ pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'blur' }],
        dcxs: [{ pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'blur' }],
        // cds: [
        //   { required: true, message: '此处为必填项', trigger: 'blur' },
        //   { pattern: /^-?[0-9]\d*$/, message: '不能输入小数', trigger: 'blur' }
        // ],
        jtjrfwq: [{ pattern: /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/, message: '请输入正确的IP地址', trigger: 'blur' }]
      },
      title: '', // 标题
      //  图片上传
      imgUrl: [],
      fileList: [], // 上传列表
      dialogVisible: false,
      dialogImageUrl: '', // 预览
      goliebiao: false, // 防重复点击
      xianxidizhi: '',
      // JointSelection: {
      //   dialogWorkOrder: false
      // },
      showcity: false,
      xqbmValue: '',
      diziValue: '',
      chedaoshuTS: false,
      cswocaonima: 1,
      removechedao: [],
      tiText1: '暂无数据', // 卡口类型
      tiText2: '暂无数据', // 触发类型
      tiText3: '暂无数据' // 道路等级
    }
  },
  // components: { jointSelection },
  created: function() {
    //  获取城市列表
    // this.cityOptions = JSON.parse(getUrl('district'))
    const { title, content } = this.$route.query
    this.title = title
    if (content) {
      this.setList(content)
      this.chedaoshuTS = true
    } else {
      this.chedaoshuTS = false
    }
    // 获取卡口类型
    this.getkakoulx()
    // 获取触发类型
    this.getchufalx()
    // 获取道路等级
    this.getdaolu()
  },
  methods: {
    async setList(id) {
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      params.append('userId', user.id)
      // params.append('JGID', user.zzjg_ID)
      params.append('ID', id)
      const { data: res } = await this.$http.post(`${ziC}kakou/selectKaKou`, params)
      if (res.code === '0000') {
        const content = res.data.list[0]
        if (content.jgt) {
          const cao = content.jgt.replace(/uid/g, 'name')
          this.fileList = JSON.parse(cao)
          this.imgUrl = this.fileList
        }
        const chedaoarr = JSON.stringify(content.kaKouCheDaoList)
        const newChedaoarr = chedaoarr.replace(/cdbh/g, 'value')
        this.ruleForm = content
        this.ruleForm.csArr = JSON.parse(newChedaoarr)
        this.ruleForm.xqbm2 = content.ssq_NO
        this.ruleForm.xqbm = content.ssq_NO - ''
        this.ruleForm.xxdz = content.xxdz || ''
        this.xianxidizhi = content.sfmc + ' / ' + content.csmc + ' / ' + content.xqmc + ' / ' + content.jdmc
        this.xqbmValue = this.ruleForm.xqbm
        this.diziValue = this.xianxidizhi
      } else {
        this.ruleForm = []
      }
    },
    async lazyLoadAdd(node, resolve) {
      const user = JSON.parse(getUrl('userconter'))
      if (node.level === 0) {
        return resolve(await linkageCity(user.id, node.level + 1))
      } else if (node.level === 1) {
        return resolve(await linkageCity(user.id, node.level + 1, node.value))
      } else if (node.level === 2) {
        return resolve(await linkageCity(user.id, node.level + 1, node.value))
      } else if (node.level === 3) {
        return resolve(await linkageCity(user.id, node.level + 1, node.value, node.label))
      }
    },
    //   辖区编码
    handleChange(e) {
      this.$nextTick(() => {
        const vals = this.$refs.cascaderList.presentText
        if (vals) {
          // const vals2 = vals.split(' / ')
          // let cont = ''
          // vals2.forEach(item => {
          //   cont += item
          // })
          this.xianxidizhi = vals
        } else {
          this.xianxidizhi = this.diziValue
        }
      })
      if (e.length === 1) {
        this.ruleForm.xqbm2 = e[0]
      } else if (e.length === 2) {
        this.ruleForm.xqbm2 = e[1]
      } else if (e.length === 3) {
        this.ruleForm.xqbm2 = e[2]
      } else if (e.length === 4) {
        this.ruleForm.xqbm2 = e[3]
      } else if (e.length === 0) {
        this.ruleForm.xqbm2 = ''
        this.showcity = false
        this.ruleForm.xqbm = this.xqbmValue
      }
    },
    async getkakoulx() {
      const params = new URLSearchParams()
      params.append('LXBS', 1)
      const { data: res } = await this.$http.post(`${ziC}kkdjzd/selectKaKouDianJingZiDian`, params)
      const arr = []
      if (res.code !== '0000') {
        this.kakoulxOptions = []
        this.tiText1 = res.message
      } else {
        res.data.list.forEach(item => {
          const k = {
            value: item.id,
            label: item.lxmc
          }
          arr.push(k)
        })
        this.kakoulxOptions = arr
      }
    },
    async getchufalx() {
      const params = new URLSearchParams()
      params.append('LXBS', 2)
      const { data: res } = await this.$http.post(`${ziC}kkdjzd/selectKaKouDianJingZiDian`, params)
      const arr = []
      if (res.code !== '0000') {
        this.chufalxOptions = []
        this.tiText2 = res.message
      } else {
        res.data.list.forEach(item => {
          const k = {
            value: item.id,
            label: item.lxmc
          }
          arr.push(k)
        })
        this.chufalxOptions = arr
      }
    },
    // 获取道路等级
    async getdaolu() {
      const { data: res } = await this.$http.post(`${ziC}dldj/selectDaoLuDengJi`)
      const arr = []
      if (res.code !== '0000') {
        this.daoluOptions = []
        this.tiText3 = res.message
      } else {
        res.data.list.forEach(item => {
          const k = {
            value: item.id,
            label: item.dlmc
          }
          arr.push(k)
        })
        this.daoluOptions = arr
      }
    },
    // 格式转换
    async geZhuanhuan() {
      const params = new URLSearchParams()
      params.append('NE', this.ruleForm.NE)
      const { data: res } = await this.$http.post(`${ziC}kakou/changeGPS`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true
      })
      this.ruleForm.NE2 = res.data.NE
      this.ruleForm.gpszb = res.data.NE
    },
    // 删除图片
    handleRemove(a) {
      const index = this.imgUrl.findIndex(item => item.uid === a.uid)
      this.imgUrl.splice(index, 1)
    },
    // 添加图片
    async lalal(el) {
      let videoSize = el.size / (1024 * 1024) // 转成M格式
      videoSize = videoSize.toFixed(1) // 保留小数点后一位
      if (videoSize > 2) {
        const dele = this.$refs.upload.uploadFiles
        const index = dele.findIndex(item => item.uid === el.uid)
        dele.splice(index, 1)
        // this.$refs.upload.uploadFiles
        return this.$message({
          type: 'error',
          message: '图片超过最大限制2M',
          center: true
        })
      } else {
        startLoading(document.getElementById('uploadtu4'))
        const file = el.raw
        const fd = new FormData()
        let arr = {}
        fd.append('file', file) // 传文件
        fd.append('type', 1) // 传文件
        const { data: res } = await this.$http.post(`${upload}`, fd)
        endLoading()
        if (res.code === '0000') {
          res.data.forEach(item => {
            arr = {
              uid: el.uid,
              url: item
            }
          })
          this.imgUrl.push(arr)
        } else {
          return this.$message({
            type: 'error',
            message: res.message,
            center: true
          })
        }
      }
    },
    // 预览
    handlePictureCardPreview(e) {
      this.dialogImageUrl = e.url
      this.dialogVisible = true
    },
    baoCun(title, ruleForm) {
      this.goliebiao = true
      const a = setTimeout(() => {
        this.goliebiao = false
      }, 10000)
      const user = JSON.parse(getUrl('userconter'))
      const { kkmc, kkbh, glbh1, glbh2, kklx_ID, xqbm, xqbm2, xxdz, gpszb, dldj, cflx_MC, xcxs, dcxs, fxs, sfkqrl, sfkqecsb, jtjrfwq, csArr, id } = this.ruleForm
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (title === '添加卡口') {
            const params = new URLSearchParams()
            const cdbhBox = []
            params.append('user_id', user.id)
            params.append('JGID', user.zzjg_ID)
            params.append('KKMC', kkmc)
            params.append('KKBH', kkbh)
            params.append('GLBH1', glbh1)
            params.append('GLBH2', glbh2)
            params.append('KKLX_ID', kklx_ID)
            params.append('XQBM', xqbm2)
            params.append('XXDZ', xxdz)
            params.append('GPSZB', gpszb)
            params.append('DLDJ', dldj)
            params.append('CFLX_ID', cflx_MC)
            params.append('XCXS', xcxs)
            params.append('DCXS', dcxs)
            params.append('FXS', fxs)
            // params.append('CDS', cds)
            params.append('SFKQRL', sfkqrl)
            params.append('SFKQECSB', sfkqecsb)
            params.append('JTJRFWQ', jtjrfwq)
            params.append('imgs', JSON.stringify(this.imgUrl))
            if (xqbm.length === 3) {
              params.append('SFBM', xqbm[0])
              params.append('CSBM', xqbm[1])
              params.append('XQBM', xqbm[2])
              params.append('SSQ_NO', xqbm[2])
            } else if (xqbm.length === 4) {
              params.append('SFBM', xqbm[0])
              params.append('CSBM', xqbm[1])
              params.append('XQBM', xqbm[2])
              params.append('JDBM', xqbm[3])
              params.append('SSQ_NO', xqbm[3])
            }
            if (csArr.length > 0) {
              csArr.forEach(item => {
                cdbhBox.push({
                  ID: item.id || '',
                  CDBH: item.value
                })
              })
            }
            params.append('CDJSON', JSON.stringify(cdbhBox))
            const { data: res } = await this.$http.post(`${ziC}kakou/insertKaKou`, params)
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              clearTimeout(a)
              this.goliebiao = false
              return this.$message({
                type: 'error',
                message: res.message,
                center: true
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true
            })
            this.$router.push('/bayonetList')
          } else {
            const params2 = new URLSearchParams()
            const cdbhBox2 = []

            this.chufalxOptions.forEach(item => {
              if (item.label === cflx_MC || item.value === cflx_MC) {
                this.cflx_MC = item.value
              }
            })
            if (typeof xqbm !== 'number') {
              if (xqbm.length === 3) {
                params2.append('SFBM', xqbm[0])
                params2.append('CSBM', xqbm[1])
                params2.append('XQBM', xqbm[2])
                params2.append('SSQ_NO', xqbm[2])
              } else if (xqbm.length === 4) {
                params2.append('SFBM', xqbm[0])
                params2.append('CSBM', xqbm[1])
                params2.append('XQBM', xqbm[2])
                params2.append('JDBM', xqbm[3])
                params2.append('SSQ_NO', xqbm[3])
              }
            } else {
              const s = (xqbm + '').substr(0, 2) + '0000'
              const c = (xqbm + '').substr(0, 4) + '00'
              const x = (xqbm + '').substr(0, 6)
              params2.append('SFBM', s)
              params2.append('CSBM', c)
              params2.append('XQBM', x)
              if ((xqbm + '').length > 6) {
                params2.append('JDBM', xqbm)
                params2.append('SSQ_NO', xqbm)
              } else {
                params2.append('SSQ_NO', x)
              }
            }
            params2.append('user_id', user.id)
            params2.append('ID', id)
            params2.append('JGID', user.zzjg_ID)
            params2.append('KKMC', kkmc)
            params2.append('KKBH', kkbh)
            params2.append('GLBH1', glbh1)
            params2.append('GLBH2', glbh2)
            params2.append('KKLX_ID', kklx_ID)
            params2.append('XQBM', xqbm2)
            params2.append('XXDZ', xxdz)
            params2.append('GPSZB', gpszb)
            params2.append('DLDJ', dldj)
            params2.append('CFLX_ID', this.cflx_MC)
            params2.append('XCXS', xcxs)
            params2.append('DCXS', dcxs)
            params2.append('FXS', fxs)
            // params2.append('CDS', cds)
            params2.append('SFKQRL', sfkqrl)
            params2.append('SFKQECSB', sfkqecsb)
            params2.append('JTJRFWQ', jtjrfwq)
            params2.append('imgs', JSON.stringify(this.imgUrl))
            params2.append('SCCDS', this.removechedao)
            if (csArr.length > 0) {
              csArr.forEach(item => {
                cdbhBox2.push({
                  ID: item.id || '',
                  CDBH: item.value
                })
              })
            }
            params2.append('CDJSON', JSON.stringify(cdbhBox2))
            const { data: res } = await this.$http.post(`${ziC}kakou/updateKaKou`, params2)
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              clearTimeout(a)
              this.goliebiao = false
              return this.$message({
                type: 'error',
                message: res.message,
                center: true
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true
            })
            this.$router.push('/bayonetList')
          }
        } else {
          this.goliebiao = false
          this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true
          })
          return false
        }
      })
    },
    // 最大车速
    inputMax(num) {
      if (num > 220) {
        this.ruleForm.xcxs = 220
      }
    },
    inputMax2(num) {
      if (num > 220) {
        this.ruleForm.dcxs = 220
      }
    },
    goBack: function() {
      this.$router.push('/bayonetList')
    },
    selectCity() {
      // this.JointSelection.dialogWorkOrder = true
      this.showcity = true
      this.$refs.cascaderList.toggleDropDownVisible()
    },
    visibleChange(val) {
      if (!val) {
        // if (this.ruleForm.xqbm === this.xqbmValue) {
        //   this.showcity = false
        // }
        this.showcity = false
      }
    },
    // pingguanbi(val) {
    //   const { type, xqbm, xqbmArr, cityVal } = val
    //   if (xqbmArr.length !== 0) {
    //     this.ruleForm.xqbm = xqbmArr
    //   }
    //   this.ruleForm.xqbm2 = xqbm || this.ruleForm.xqbm2
    //   this.xianxidizhi = cityVal || this.xianxidizhi
    //   // console.log(type, xqbm, xqbmArr, cityVal)
    //   this.JointSelection.dialogWorkOrder = type
    // },
    xiugaiDom() {
      this.cswocaonima = this.cswocaonima - 0.1 // 强制更新DOM树
    },
    // 添加车道
    addDomain() {
      if (this.ruleForm.csArr.length >= this.chedaoOptions.length) {
        return ''
      } else {
        this.cswocaonima = this.cswocaonima - 0.1 // 强制更新DOM树
        this.ruleForm.csArr.push({
          value: this.chedaoOptions[this.ruleForm.csArr.length - 0].value,
          key: Date.now()
        })
        this.$refs.ruleForm.validateField('csArr')
      }
      console.log(this.ruleForm.csArr)
    },
    // 删除车道
    removeDomain(item) {
      if (item.id) {
        this.removechedao.push(item.id)
        const nset = new Set(this.removechedao) // set 去重
        this.removechedao = [...nset]
        if (this.removechedao.length > 0) {
          this.$confirm('车道删除后，相应的电子警察车道也将会被删除！是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              const index = this.ruleForm.csArr.indexOf(item)
              if (index !== -1) {
                this.ruleForm.csArr.splice(index, 1)
                this.$refs.ruleForm.validateField('csArr')
                this.cswocaonima = this.cswocaonima + 0.1 // 强制更新DOM树
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        }
      } else {
        const index = this.ruleForm.csArr.indexOf(item)
        if (index !== -1) {
          this.ruleForm.csArr.splice(index, 1)
          this.$refs.ruleForm.validateField('csArr')
          this.cswocaonima = this.cswocaonima + 0.1 // 强制更新DOM树
        }
      }
    },
    // 自定义车道验证
    checkAge(rule, value, callback) {
      if (value.length > 0) {
        const arr = []
        value.forEach(item => {
          arr.push(item.value)
        })
        if (this.isRepeat(arr)) {
          return callback(new Error('车道数不能重复'))
        } else {
          return callback()
        }
      } else {
        return callback(new Error('此处为必填项'))
      }
    },
    isRepeat(arr) {
      var hash = {}
      for (var i in arr) {
        if (hash[arr[i]]) {
          return true
        }
        // 不存在该元素，则赋值为true，可以赋任意值，相应的修改if判断条件即可
        hash[arr[i]] = true
      }
      return false
    }
  }
}
</script>
<style lang="scss" scoped>
.userBox {
  .el-row {
    border-bottom: 1px solid #f2f2f2;
    .title {
      display: block;
      height: 38px;
      line-height: 38px;
      color: rgba(89, 89, 89, 1);
      font-size: 15px;
      font-weight: 600;
    }
    .el-form-item {
      .inputSelect {
        width: 260px;
      }
      .jinDuTitle {
        height: 18px;
        line-height: 22px;
        color: #c0c4cc;
      }
      .iconBtn {
        margin-left: 10px;
        font-size: 15px;
        color: rgba(187, 187, 187, 1);
        cursor: pointer;
      }
      .DuFen {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .btnGs {
          margin: 0 10px;
        }
      }
      .el-upload__tip {
        font-size: 12px;
        color: #a1a3a8;
        margin-top: 7px;
        padding-left: 10px;
      }
      .xunze {
        margin-top: 18px;
        display: flex;
        > span {
          color: #333;
          width: 80px;
          margin-right: 10px;
        }
      }
    }
    .form-item-bottom {
      margin-bottom: 0;
    }
  }
  .fooer_btn {
    margin: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
  .svgBox {
    display: inline-block;
  }
}
</style>
